<template>
    <div class="date-picker-components">
        <el-date-picker :disabled="startTimeDisabled" :picker-options="startDatePicker"  default-time="00:00:00" value-format="timestamp" v-model="startDate" type="datetime" :size="size" :format="format"  @change="changeDate"  placeholder="请选择开始时间"></el-date-picker>至
        <el-date-picker :disabled="endTimeDisabled" :picker-options="endDatePicker" default-time="23:59:59"  value-format="timestamp" v-model="endDate" type="datetime" :size="size" :format="format"  @change="changeDate" placeholder="请选择结束时间"></el-date-picker>
    </div>
</template>

<script>
export default {
    name: 'alDatePicker',
    props: {
        value: Array,
        startTimeDisabled: {
            type: Boolean,
            default: false
        },
        endTimeDisabled: {
            type: Boolean,
            default: false
        },
        size: {
            type: String,
            default: 'small'
        },
        format: {
            type: String,
            default: 'yyyy-MM-dd'
        }
    },
    mounted () {
        if (this.value.length === 2) {}
        this.startDate = this.value[0];
        this.endDate = this.value[1];
    },
    data () {
        return {
            startDatePicker: this.beginDate(),
            endDatePicker: this.processDate(),
            startDate: '',
            endDate: ''
        };
    },
    watch: {
        value (val) {
            this.startDate = this.value[0];
            this.endDate = this.value[1];
        }
    },
    methods: {
        beginDate () {
            const self = this;
            return {
                disabledDate (time) {
                    if (self.endDate) {
                        // 如果结束时间不为空，则小于结束时间
                        return (
                            new Date(self.endDate).getTime() < time.getTime()
                        );
                    } else {
                        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                }
            };
        },
        processDate () {
            const self = this;
            return {
                disabledDate (time) {
                    if (self.startDate) {
                        // 如果开始时间不为空，则结束时间大于开始时间
                        return (
                            new Date(self.startDate).getTime() > time.getTime()
                        );
                    } else {
                        // return time.getTime() > Date.now()//开始时间不选时，结束时间最大值小于等于当天
                    }
                }
            };
        },
        changeDate () {
            const data = [this.startDate, this.endDate].filter(d => d);
            this.$emit('input', data);
            this.$emit('change', data);
        }
    }
};
</script>

<style lang="scss">
    .date-picker-components{
        display: flex;
        font-size: 12px;
        >div:first-child{
            margin-right: 5px;
        }
        >div:last-child{
            margin-left: 5px;
        }
    }
</style>
